<template>
	<el-tree
		:data="options['data'] || []"
		:empty-text="options['empty-text']"
		:node-key="options['node-key']"
		:props="options['props']"
		:load="options['load']"
		:render-content="options['render-content']"
		:highlight-current="options['highlight-current']"
		:default-expand-all="options['default-expand-all']"
		:expand-on-click-node="options['expand-on-click-node']"
		:auto-expand-parent="options['auto-expand-parent']"
		:default-expanded-keys="options['default-expanded-keys']"
		:show-checkbox="options['show-checkbox']"
		:check-strictly="options['check-strictly']"
		:filter-node-method="options['filter-node-method']"
		:accordion="options['accordion']"
		:indent="options['indent']"

		@node-click="this['_node-click']"
		@check-change="this['_check-change']"
		@current-change="this['_current-change']"
		@node-expand="this['_node-expand']"
		@node-collapse="this['_node-collapse']"

		ref="tree"
		:default-checked-keys="value"
	></el-tree>
</template>

<script>

	export default {
		props: {
			options: {
				default: Object,
				required: true
			},
			value: {
				required: true
			}
		},
		methods: {
			'_node-click' (nodeData, node, tree) {
				this.$emit('node-click', nodeData, node, tree)
				this.options['@node-click']&& this.options['@node-click'](nodeData, node, tree)
			},
			// *
			'_check-change' (nodeData, nodeChecked, childChecked) {
				let value = this.getValue(this.options['node-key'])
				this.$emit('input', value)

				this.$emit('check-change', nodeData, nodeChecked, childChecked)
				this.options['@check-change']&& this.options['@check-change'](nodeData, nodeChecked, childChecked);
			},
			'_current-change' (nodeData, node) {
				this.$emit('current-change', nodeData, node)
				this.options['@current-change'] && this.options['@current-change'](nodeData, node)
			},
			'_node-expand' (nodeData, node, tree) {
				this.$emit('node-expand', nodeData, node, tree)
				this.options['@node-expand'] && this.options['@node-expand'](nodeData, node, tree)
			},
			'_node-collapse' (nodeData, node, tree) {
				this.$emit('node-collapse', nodeData, node, tree)
				this.options['@node-collapse'] && this.options['@node-collapse'](nodeData, node, tree)
			},
			// 自定义外部方法，用于决定返回节点内容，以及节点属性
			getValue (key, isString) {
				let checkedNodes = this.$refs['tree'].getCheckedNodes()
				let result = checkedNodes.filter(node => node.isLeaf !== false).map(node => node[key]);
				if(isString){
					result = result.toString();
				}
				return result
			},
			filter () {
				return this.$refs['tree'].filter()
			},
			updateKeyChildren (key, data) {
				return this.$refs['tree'].updateKeyChildren(key, data)
			},
			getCheckedNodes (boole) {
				return this.$refs['tree'].getCheckedNodes(boole)
			},
			setCheckedNodes (nodes) {
				return this.$refs['tree'].setCheckedNodes(nodes)
			},
			getCheckedKeys (boole) {
				return this.$refs['tree'].getCheckedKeys(boole)
			},
			setCheckedKeys (keys, boole) {
				return this.$refs['tree'].setCheckedKeys(keys, boole)
			},
			setChecked (keys, boole, deep) {
				return this.$refs['tree'].setChecked(keys, boole, deep)
			},
			getCurrentKey () {
				return this.$refs['tree'].getCurrentKey()
			},
			getCurrentNode () {
				return this.$refs['tree'].getCurrentNode()
			},
			setCurrentKey (key) {
				return this.$refs['tree'].setCurrentKey(key)
			},
			setCurrentNode (node) {
				return this.$refs['tree'].setCurrentNode(node)
			}
		}
	}
</script>
